<template>
  <div class="search-box">
    <div class="text">
      你正在预览{{ city }}的天气信息，可以通过右上角的"+"号按钮保存起来
    </div>
    <ul>
      <li>当日气温是：{{ tmp }}摄氏度</li>
      <li>当日天气是：{{ weather }}</li>
      <li>当日风向是：{{ winddirection }}风</li>
      <li>当日风力是：{{ windpower }}级</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'SearchBox',
  data() {
    return {
      city: '',
      adcode: '',
      tmp: '',
      weather: '',
      winddirection: '',
      windpower: '',
      active: true,
    }
  },
  computed: {},
  mounted() {
    const a = localStorage.getItem('currentcity')
    // console.log(a)
    this.city = a
    this.code()
  },
  methods: {
    code() {
      axios({
        url:
          'https://restapi.amap.com/v3/geocode/geo?address=' +
          this.city +
          '&key=b36dd440f158868263e0266de8cc36b8',
        method: 'GET',
      })
        .then((res) => {
          // console.log(res)
          this.adcode = res.data.geocodes[0].adcode
        })
        .then(() => {
          axios({
            url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.adcode}&key=b36dd440f158868263e0266de8cc36b8&extensions=base`,
            method: 'GET',
          }).then((res) => {
            // console.log(res)
            this.tmp = res.data.lives[0].temperature
            this.weather = res.data.lives[0].weather
            this.winddirection = res.data.lives[0].winddirection
            this.windpower = res.data.lives[0].windpower
          })
        })
    },
  },
}
</script>

<style scope>
.search-box {
  width: 80%;
  margin: 0 auto 20px;
  text-align: center;
  /* background-color: cyan; */
}
.search-box .text {
  /* width: 100vw; */
  height: 40px;
  line-height: 40px;
  background: #014e70;
  box-sizing: border-box;
  border-radius: 5px;
}
.search-box ul {
  margin-top: 20px;
}
.search-box li {
  margin-block: 15px;
  font-size: 16px;
}
</style>
